<script lang="ts">
import { defineComponent, ref } from 'vue'

// import { require } from "../function/require"

import { require } from '../function/require'

export default defineComponent({
  props: ['active'],
  setup(props) {
    // console.log(props);
    // // 引入组件
    const active = ref(props.active)
    return { active }
  }
})
</script>

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item to="/villa">
      <span>首页</span>
      <template #icon="props">
        <img
          :src="props.active ? require('../assets/img/02.jpg') : require('../assets/img/01.jpg')"
        />
      </template>
    </van-tabbar-item>

    <van-tabbar-item to="/cottage">
      <span>商品</span>
      <template #icon="props">
        <img
          :src="props.active ? require('../assets/img/04.jpg') : require('../assets/img/03.jpg')"
        />
      </template>
    </van-tabbar-item>

    <van-tabbar-item to="/shop">
      <span>购物车</span>
      <template #icon="props">
        <img
          :src="props.active ? require('../assets/img/06.jpg') : require('../assets/img/05.jpg')"
        />
      </template>
    </van-tabbar-item>

    <van-tabbar-item to="/my">
      <span>我的</span>
      <template #icon="props">
        <img
          :src="props.active ? require('../assets/img/08.jpg') : require('../assets/img/07.jpg')"
        />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style scoped>
.van-tabbar-item__icon img {
  display: block;
  height: 31px;
}
</style>
